<template>
    <div class="agent-config">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            代理设置
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">代理设置</p>
                        </div>
                        <div class="ivu-card-body"> 
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120" style="width:30%;min-width: 470px">
                                <FormItem label="代理区域交易额" prop="lines">
                                    <Input v-model="formValidate.lines">
                                        <span slot="append">%</span>
                                    </Input>
                                </FormItem>
                                <FormItem class="right">
                                    <Button type="primary" @click="handleSubmit()">提交</Button>
                                    <Button @click="() => {$refs.formValidate.resetFields()}" style="margin-left: 8px">重置</Button>
                                </FormItem>
                            </Form>
                        </div>
                    </div>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    export default {
        data(){
            return {
                host: window.location.host,
                formValidate: {
                    lines: ''//代理区域交易额
                },
                ruleValidate: {
                    lines: [
                        { required: true, message: '请填写代理区域交易额', trigger: 'blur' },
                    ]
                }
            }
        },
        mounted(){
            
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            handleSubmit() {
                console.log(this.formValidate)
            }
        }  
    }
</script>


<style lang="less">
    @import '../../../assets/styles/constant.less';
    .agent-config{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .card-add{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-around;
                }
                
            }
            .roleTips {
                color: #aaa;
            }
            .right .ivu-form-item-content {
                text-align: right;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>